<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#father{
				width: 1000px;
				height: 420px;
				background-color: bisque;
				margin-top: 150px;
				margin-left: 300px;
			}
			#d1 {
				width: 600px;
				height: 300px;
				float: left;
			
			}

			.d2 {
				width: 300px;
				height: 300px;
				float: left;
			}
			table{
				width: 600px;
				height: 400px;
				background-color: mediumaquamarine;
			}
			img {
				width: 400px;
				height: 400px;
			}
			td{
				text-align: center;
			}
			body{
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="father">

			<div id="d1">
				<form action="" method="post" id="f1">
					<table border="1" cellspacing="0" cellpadding="" id="t1">
						<tr style="font-weight: 800;">
							<td><input type="checkbox" name="" id="" value="" />此为多选按钮</td>
							<td>姓名</td>
							<td>性别</td>
							<td>年龄</td>
							<td>
								住址<br/>(点击下列地址有惊喜哦)
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="" id="" value="" /></td>
							<td>张三</td>
							<td>男</td>
							<td>18</td>
							<td>
								<p onclick="p1()">天堂与地狱的交界处</p>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="" id="" value="" /></td>
							<td>小三</td>
							<td>女</td>
							<td>18</td>
							<td>
								<p onclick="p2()">修罗场</p>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="" id="" value="" /></td>
							<td>嬴政</td>
							<td>男</td>
							<td>18</td>
							<td>
								<p onclick="p3()">秦始皇陵</p>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="" id="" value="" /></td>
							<td>梁红玉</td>
							<td>女</td>
							<td>18</td>
							<td>
								<p onclick="p4()">风花雪月之地</p>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="" id="" value="" /></td>
							<td>商鞅</td>
							<td>男</td>
							<td>18</td>
							<td>
								<p onclick="p5()">马车</p>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="" id="" value="" /></td>
							<td>袁崇焕</td>
							<td>男</td>
							<td>18</td>
							<td>
								<p onclick="p6()">关宁防线</p>
							</td>
						</tr>
					</table>
				<input type="checkbox" name="" id="checkall" value="" onclick="a()" />全选
				<input type="checkbox" name="" id="checkman" value="" onclick="b()" />全选男
				<input type="checkbox" name="" id="checkwoman" value="" onclick="c()" />全选女
				</form>
			</div>
			<div class="d2">
				<img id='i1' src="./img/a1.webp">

			</div>
		</div>
	</body>
	<script type="text/javascript">
		function a() {
			var a1 = document.getElementById('f1');
			var inputall = a1.getElementsByTagName('input');
			var ckall = document.getElementById('checkall').checked
			for (var i = 0; i < inputall.length; i++) {
				inputall[i].checked = ckall
			}
			var imgid = document.getElementById('i1')
			i1.src = './img/a1.webp';
		}

		function b() {
			var a1 = document.getElementById('f1');
			var inputall = a1.getElementsByTagName('input');
			console.log(inputall)
			var ckman = document.getElementById('checkman').checked
			console.log(ckman)
			var tr = a1.getElementsByTagName('tr');
			console.log(tr)
			for (var i = 0; i < tr.length; i++) {
				var trtext = tr[i];
				var td1 = trtext.getElementsByTagName('td')[2];
				console.log(td1)
				if (td1.innerText == '男') {
					console.log(i)
					inputall[i].checked = ckman;
				}
			}
			var imgid = document.getElementById('i1')
			i1.src = './img/男生.webp'
		}

		function c() {
			var a1 = document.getElementById('f1');
			var inputall = a1.getElementsByTagName('input');
			console.log(inputall)
			var ckwoman = document.getElementById('checkwoman').checked
			console.log(ckwoman)
			var tr = a1.getElementsByTagName('tr');
			console.log(tr)
			for (var i = 0; i < tr.length; i++) {
				var trtext = tr[i];
				var td1 = trtext.getElementsByTagName('td')[2];
				console.log(td1)
				if (td1.innerText == '女') {
					console.log(i)
					inputall[i].checked = ckwoman;
				}

			}
			var imgid = document.getElementById('i1')
			i1.src = './img/女生.webp'
		}

		function p1() {
			var imgid = document.getElementById('i1')
			i1.src = './img/天堂与地狱.webp';
		}

		function p2() {
			var imgid = document.getElementById('i1')
			i1.src = './img/修罗场.webp';
		}

		function p3() {
			var imgid = document.getElementById('i1')
			i1.src = './img/秦始皇陵.webp';
		}

		function p4() {
			var imgid = document.getElementById('i1')
			i1.src = './img/楼阁.webp';
		}

		function p5() {
			var imgid = document.getElementById('i1')
			i1.src = './img/马车.webp';
		}

		function p6() {
			var imgid = document.getElementById('i1')
			i1.src = './img/关宁防线.webp';
		}
	</script>
</html>
